<template>
  <div class="el-link__inner">
    <div class="link__inner_list">
      <div class="link__inner_list_start">
        <a href="#">
          <el-icon :size="25">
            <Expand />
          </el-icon>
        </a>
      </div>
      <div class="link__inner_list_center">
        <a href="#">
          <img src="https://res.insta360.com/static/c0b4f4ea21eb1868506ccdee7e93af7a/logo-white.svg" alt="Insta360">
        </a>
      </div>
      <div class="link__inner_list_end">
        <a href="#">Online Shop</a>
      </div>
    </div>
  </div>

</template>



<style scoped>
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  color: white;
}

.el-link__inner{
  position: relative;
  width: 100%;
  height: 64px;
  background-color: black;
}

.link__inner_list {
  display: flex;
  justify-content: space-around;
  text-align: center;
  width: 100%;
}


.link__inner_list_start a {
  color: white;
}

.link__inner_list_center a {
  font-size: 15px;
  font-weight: bold;
  display: flex;
  justify-content: center;
}

.link__inner_list_center img {
  height: 15px;
  margin-top: 6px;
}

.link__inner_list_end a{
  display: flex;
  justify-content: center;
  background: linear-gradient(96.98deg, #fe0, #ffdf4d);
  padding: 6px    10px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: bolder;
  color: black;
}

</style>